<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData.terminalName }}
          </span>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
      </template>
    </header-module>

    <div class="main-content">
      <div class="list-container">
        <el-form :inline="true" class="filter-form-inline" label-position="right" label-width="110px" size="small">
          <el-row :gutter="0" style="margin-left: 20px; margin-right: 20px">
            <el-col>
              <item-title title="基本信息"/>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="营销产品：">
                <el-link :underline="false" type="primary" @click="handlToProduct">
                  {{ getProductName(formData?.productInfo) }}
                </el-link>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端名称 ：">
                <el-link :underline="false" type="primary" @click="handlToTerina"> {{ formData.terminalName }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="记账日期：">
                {{ dateFormat("yyyy-mm-dd", formData.createdAt) }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="营销数据来源：">
                <span v-if="formData.saleSource === '1'">厂家配送订单</span>
                <span v-if="formData.saleSource === '2'">商业流向记录</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="关联单据编号：">
                <el-link :underline="false" type="primary" @click="handlRelationNo">{{ formData.relationNo }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item :label="formData.saleSource === '1' ?'客户下单日期：':'配送日期：'">
                {{ dateFormat("yyyy-mm-dd", formData.deliveryTime) }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="发货数量：">
                {{ formData.saleNum }}
                <span v-if="formData?.productInfo?.sellUnit ">
                 {{ getLabel('sell_unit', formData?.productInfo?.sellUnit) }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端价：">

                <span v-if="formData.terminalPrice > 0">{{ isInteger(formData.terminalPrice) }}</span>
                <span v-if="formData?.productInfo?.sellUnit ">
                  元 /{{ getLabel('sell_unit', formData?.productInfo?.sellUnit) }}
                </span>

              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="负责营销职员：">
                {{ formData.headName }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端价营销额：">
                {{ isInteger(formData.terminalAmount) }} 元
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="回款营销额：">
                {{ isInteger(formData.returnAmount) }} 元
              </el-form-item>
            </el-col>

            <el-col>
              <item-title title="进货渠道关系"/>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端名称：">
                {{ formData.terminalName }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端类型：">
                {{ getLabel('app_mode', formData.terminalType) }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端所在地区：">
                {{ formData.provinceName }}/{{ formData.cityName }}/{{ formData.areaName }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="营销模式：">
                <div v-if="formData.sellMode !== 'direct'">
                  {{ formData.agentAttribute === '1' ? '独家招商' : '精细招商' }}
                </div>
                <div v-else> 终端直销</div>
              </el-form-item>
            </el-col>
            <el-col v-if="formData.sellMode !== 'direct'" :lg="8" :xs="4">
              <el-form-item v-if="formData.sellMode === 'agent'" label="代理商名称：">
                <el-link :underline="false" type="primary" @click="handlToAgent"> {{ formData.agentName }}</el-link>
              </el-form-item>
              <el-form-item v-if="formData.sellMode === 'agent_person'" label="兼职名称：">
                <el-link :underline="false" type="primary" @click="handlToAgent"> {{ formData?.userName }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="交易价：">

                <span v-if="formData.tradePrice > 0">{{ isInteger(formData.tradePrice) }}</span>
                <span v-if="formData?.productInfo?.sellUnit ">
                  元 /{{ getLabel('sell_unit', formData?.productInfo?.sellUnit) }}
                </span>

              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="配送商：">
                <span v-if="formData.saleSource === '1'">厂家配送</span>
                <el-link :underline="false" type="primary" @click="handlToDistributeName">
                  <span v-if="formData.saleSource === '2'">{{ formData.distributeName }}</span>
                </el-link>
              </el-form-item>
            </el-col>
            <el-col v-if="formData.saleSource === '2'" :lg="8" :xs="4">
              <el-form-item label="配送费：">
                <div v-if="formData?.distributeDetailInfo?.computeMode==='固定价格'">
                  <span>{{
                      formData?.distributeDetailInfo?.distributePrice
                    }}元</span><span> / {{ getLabel('sell_unit', formData.sellUnit) }}</span>
                </div>
                <div v-if="formData?.distributeDetailInfo?.computeMode==='终端价百分比'">
                  <span>{{ formData?.distributeDetailInfo?.distributePrice }}%</span><span>终端价</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>

    <!--产品详情-->
    <detail-drawer ref="proDetailDrawer" custom-title>
      <template #title>
        {{ getProductName(formData?.productInfo) }}
      </template>
      <template #contents>
        <div class="drawer-content">
          <div class="history-list">
            <item-title title="基本信息"/>
            <product-base-info
                v-if="formData.productId"
                :id="formData.productId"
            />
          </div>
          <div class="history-list">
            <item-title title="修改记录"/>
            <operation-view :id="formData.productId" mode="product"/>
          </div>
        </div>
      </template>
    </detail-drawer>
    <!--终端详情-->
    <detail-drawer ref="terminalRef" custom-title>
      <template #title>
        <span> {{ formData.terminalName }}</span>
      </template>
      <template #contents>
        <terminalName :id="formData.terminalId"/>
      </template>

    </detail-drawer>
    <!--代理商详情-->
    <detail-drawer ref="agentRef" custom-title>
      <template #title>
        <span v-if="formData.agentType === 'agent'">{{ formData.agentName }}</span>
        <span v-if="formData.agentType === 'agent_person'">{{ formData?.agentInfo?.userName }}</span>
      </template>
      <template #contents>
        <agentInfo :id="formData.agentId"/>
      </template>
    </detail-drawer>
    <!--配送商详情-->
    <detail-drawer ref="distributeNameRef" custom-title>
      <template #title>
        {{ formData.distributeName }}
      </template>
      <template #contents>
        <distributorInfo :id="formData.distributeId"/>
      </template>
    </detail-drawer>
    <!--关联订单编号-->
    <detail-drawer ref="orderInfoRef" custom-title>
      <template #title>
        {{ formData.relationNo }}
      </template>
      <template #contents>
        <businessFlow :id="formData?.relationId"/>
      </template>
    </detail-drawer>
  </div>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  name: 'Index',
  components: {
    productBaseInfo: defineAsyncComponent(() =>
        import(
            '@CRM/views/commonView/detailComponents/product/productBaseInfo.vue'
            )
    ),
    agentInfo: defineAsyncComponent(() =>
        import('@CRM/views/commonView/detailComponents/agent/agentInfo')
    ),
    terminalName: defineAsyncComponent(() =>
        import('@CRM/views/commonView/detailComponents/terminal/terminalInfo')
    ),
    distributorInfo: defineAsyncComponent(() =>
        import('@CRM/views/commonView/detailComponents/distributor/distributorInfo')
    ),
    distributorServiceInfo: defineAsyncComponent(() =>
        import('@CRM/views/commonView/detailComponents/distributor/distributorServiceInfo')
    ),
    businessFlow: defineAsyncComponent(() =>
        import('@CRM/views/commonView/businessFlow/index.vue'))
  },
  setup() {
    const api = inject('api')
    const router = useRouter()
    const route = useRoute()
    var data = reactive({
      formData: {},
      proDetailDrawer: null,
      terminalRef: null,
      agentRef: null,
      tradePriceRef: null,
      distributeNameRef: null,
      orderInfoRef: null
    })

    const handlBack = () => {
      router.go(-1)
    }
    // 获取详情
    const handlDetail = (id) => {
      api.sellDetail.TSELLDETAIL_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.saleDetail
        }
      })
    }

    const handlToProduct = () => {
      data.proDetailDrawer.open()
    }

    const handlToTerina = () => {
      data.terminalRef.open()
    }

    const handlToAgent = () => {
      data.agentRef.open()
    }

    const handlTradePrice = () => {
      data.tradePriceRef.open()
    }

    const handlToDistributeName = () => {
      data.distributeNameRef.open()
    }

    const handlRelationNo = () => {
      data.orderInfoRef.open()
    }

    onMounted((_) => {
      if (route.query.id) {
        handlDetail(route.query.id)
      }
    })
    return {
      ...toRefs(data),
      handlBack,
      handlDetail,
      handlToProduct,
      handlToTerina,
      handlToAgent,
      handlTradePrice,
      handlToDistributeName,
      handlRelationNo
    }
  }

}

</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
